import React from 'react';
import { Card, Alert, Badge, Button } from 'antd';
import { TeamOutlined, ReloadOutlined } from '@ant-design/icons';
import MemberTable from './MemberTable';

const MembersSection = ({
  members,
  userRole,
  isLoading,
  operationLoading,
  onRefresh,
  onUpdateMemberRole,
  onRemoveMember
}) => {
  return (
    <Card className="members-section">
      <div className="section-header">
        <div className="section-title">
          <TeamOutlined />
          成员列表
          <Badge count={members.length} className="section-badge" showZero />
        </div>
        <Button 
          icon={<ReloadOutlined />}
          onClick={onRefresh}
          loading={isLoading}
          size="small"
          className="refresh-btn"
        >
          刷新
        </Button>
      </div>

      <div className="section-content">
        {userRole === 'admin' && (
          <Alert
            message="管理提示"
            description="作为管理员，您可以提升普通成员为管理员、移除成员，或降级自己为普通成员。为确保网络正常运行，网络中必须至少保留一名管理员。"
            type="info"
            className="members-alert"
            showIcon
          />
        )}
        
        <div className="members-table-container">
          <MemberTable
            members={members}
            userRole={userRole}
            isLoading={isLoading}
            operationLoading={operationLoading}
            onUpdateMemberRole={onUpdateMemberRole}
            onRemoveMember={onRemoveMember}
          />
        </div>
      </div>
    </Card>
  );
};

export default MembersSection;